<template>
  <el-dialog
    title="设备信息"
    :visible.sync="visible"
    :width="form.deviceType == 'mem' ? '800px': '700px'"
    append-to-body
  >
    <div style="display: flex;">
      <div style="width: 100px;">
        <div style="position: relative;">
          <!-- 站位图片 -->
          <img style="width: 100%;" src="">
          <svg-icon class="text-navy" icon-class="fj_zsd" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" />
        </div>
      </div>
      <el-form
        ref="form"
        label-width="80px"
        size="small"
        style="flex:1;padding-left: 30px;"
      >
        <!-- <div style="column-gap: 40px;column-rule: 1px solid #E9ECF0;column-count:2;"> -->
        <fieldset
          style="width:49%;height:100%;float: left;"
          :style="{
            'width': form.deviceType == 'mem' ? '40%': '49%'
          }"
        >
          <legend>设备参数</legend>
          <el-form-item style="margin-bottom: 0px;" label="设备名称" prop="equName">
            <el-tooltip :content="form.equName" placement="top-start"><div class="text-cut" style="max-width: 150px;">{{ form.equName }}</div></el-tooltip>
          </el-form-item>
          <el-form-item style="margin-bottom: 0px;" label="设备位置" prop="locationName">
            <el-tooltip :content="form.locationName" placement="top-start"><div class="text-cut" style="max-width: 150px;">{{ form.locationName }}</div></el-tooltip>
          </el-form-item>
        </fieldset>
        <fieldset
          style="width:49%;height:100%;display: inline-block;"
          :style="{
            'width': form.deviceType == 'mem' ? '58%': '49%'
          }"
        >
          <legend>运行参数</legend>
          <el-form-item style="margin-bottom: 0px;" label="运行状态" prop="isUsed">
            <!-- <span v-if="form.isUsed == 1">使用</span>
            <span v-if="form.isUsed == 0">未使用</span> -->
          </el-form-item>
          <el-form-item label="正面显示" style="margin-bottom:0;">
            <template v-if="form.equOperation.frontDisplay == 'green'">
              <svg-icon icon-class="fj_pass" style="color: green;" /> <span>绿</span>
            </template>
            <template v-if="form.equOperation.frontDisplay == 'red'">
              <svg-icon icon-class="fj_noPass" style="color: red;" /> <span>红</span>
            </template>
          </el-form-item>
          <el-form-item label="背面显示" style="margin-bottom:0;">
            <template v-if="form.equOperation.backDisplay == 'green'">
              <svg-icon icon-class="fj_pass" style="color: green;" /> <span>绿</span>
            </template>
            <template v-if="form.equOperation.backDisplay == 'red'">
              <svg-icon icon-class="fj_noPass" style="color: red;" /> <span>红</span>
            </template>
          </el-form-item>
        </fieldset>
        <!-- </div> -->
        <!--  -->
      </el-form>
    </div>
    <!-- <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div> -->
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      form: {
        equOperation: {}
      }
    }
  },
  methods: {
    open(deviceInfo) {
      this.form = deviceInfo
      this.visible = true
    }
  }
}
</script>

  <style lang="scss" scoped>
  fieldset {
    border: 1px solid #7F9DB9;
  }
  </style>

